<template>
  <div class="container">
    <div class="up-container">
      <div class="litte-title">
        <img src="@/assets/images/airplane.png" alt="" />
        {{ $t('dataUserDetail.userInfo') }}
      </div>
      <el-form :model="queryParams" ref="queryRef" :rules="queryRules" :inline="true">
        <el-form-item :label="$t('dataUserDetail.name')" prop="userName" class="default">
          <el-input
              v-model="queryParams.userName"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.sex')" prop="sex">
          <el-input
              v-model="queryParams.sex"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.phone')" prop="phoneNumber">
          <el-input
              v-model="queryParams.phoneNumber"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.email')" prop="email">
          <el-input
              v-model="queryParams.email"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.IDType')" prop="credentialsType">
          <el-input
              v-model="queryParams.credentialsType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.IDNumber')" prop="credentialsNumber">
          <el-input
              v-model="queryParams.credentialsNumber"
              disabled
          />
        </el-form-item>
        <el-form-item label="证件有效期:" prop="credentialsTime">
          <el-input
              v-model="queryParams.credentialsTime"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.birthday')" prop="birthday">
          <el-input
              v-model="queryParams.birthday"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.nation')" prop="nationality">
          <el-input
              v-model="queryParams.nationality"
              disabled
          />
        </el-form-item>
        <el-form-item class="address" :label="$t('dataUserDetail.address')" prop="address">
          <el-input
              v-model="queryParams.address"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.registrationTime')" prop="createTime">
          <el-input
              v-model="queryParams.createTime"
              disabled
          />
        </el-form-item>
        <div style="display: flex;align-items: baseline;">
          <el-form-item :label="$t('dataUserDetail.lastLogin')">
            <el-input
                v-model="queryParams.loginDate"
                disabled
            />
          </el-form-item>
          <el-form-item :label="$t('dataUserDetail.license')">
            <div class="license">
              <img style="width: 33px;height: 31px;" src="@/assets/images/defaultPicture.png" />
              <div>{{ $t('dataUserDetail.license') }}</div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="down-container">
      <div class="litte-title2">
        <img src="@/assets/images/airplane.png" alt="" />
        {{ $t('dataUserDetail.holdDeviceInfo') }}
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column :label="$t('dataUserDetail.no')" type="index" :index="indexMethod" width="120" align="center" />
        <el-table-column :label="$t('dataUserDetail.deviceType')" prop="deviceType" align="center" >
          <template #default="scope">
            <div v-if="scope.row.deviceType">{{ scope.row.deviceType }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('dataUserDetail.serialNumber')" prop="serialNumber" align="center" >
          <template #default="scope">
            <div v-if="scope.row.serialNumber">{{ scope.row.serialNumber }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('dataUserDetail.model')" prop="modelType" align="center" >
          <template #default="scope">
            <div v-if="scope.row.modelType">{{ scope.row.modelType }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('dataUserDetail.brand')" prop="brandName" align="center" >
          <template #default="scope">
            <div v-if="scope.row.brandName">{{ scope.row.brandName }}</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column
            :label="$t('dataUserDetail.operate')"
            align="center"
            class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
                link
                type="primary"
                @click="handleDetail(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
            >{{ $t('dataUserDetail.detail') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="tableParams.pageNum"
          v-model:limit="tableParams.pageSize"
          @pagination="getDevice"
          style="margin-top: 21px; position: relative;"
      />
    </div>
    <div class="bottom-container">
      <el-button @click="goBack">{{ $t('dataUserDetail.return') }}</el-button>
    </div>
    <!--  详情  -->
    <el-dialog
        class="deviceVisible"
        v-model="dialogVisibleDetail"
        title=""
        width="26%"
        :show-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        top="6vh"
    >
      <template #header>
        <div class="title">{{ deviceTitle + "详情" }}</div>
      </template>
      <el-form :model="deviceData" ref="addAlarmRef">
        <el-form-item :label="$t('dataUserDetail.deviceType')+':'" prop="disabled">
          <el-input
              v-model="deviceData.deviceType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.equipmentBrand')" prop="brandName">
          <el-input
              v-model="deviceData.brandName"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.equipmentModel')" prop="modelType">
          <el-input
              v-model="deviceData.modelType"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.IDCard')" prop="electronicIdCard">
          <el-input
              v-model="deviceData.electronicIdCard"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.aircraftNumber')" prop="serialNumber">
          <el-input
              v-model="deviceData.serialNumber"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.flightNumber')" prop="flightControlSn">
          <el-input
              v-model="deviceData.flightControlSn"
              disabled
          />
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.equipmentPhoto')" prop="devicePicture">
          <img v-if="deviceData.devicePicture" style="width: 100px; height: 100px;" :src="deviceData.devicePicture" alt="" />
          <div v-else>-</div>
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.aircraftPhoto')" prop="serialNumberPicture">
          <img v-if="deviceData.serialNumberPicture" style="width: 100px; height: 100px;" :src="deviceData.serialNumberPicture" alt="" />
          <div v-else>-</div>
        </el-form-item>
        <el-form-item :label="$t('dataUserDetail.flightPhoto')" prop="flightControlSnPicture">
          <img v-if="deviceData.flightControlSnPicture" style="width: 100px; height: 100px;" :src="deviceData.flightControlSnPicture" alt="" />
          <div v-else>-</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisibleDetail = false">{{ $t('dataUserDetail.return') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="DataUserDetail">
import {onBeforeMount, onMounted, reactive, ref, toRefs} from "vue";
import {ElFormItem, ElInput} from "element-plus";
import {useRoute} from "vue-router";
import { getPersonDetail, getDeviceListDetail, getDeviceInfo } from "@/api/dataManagement/dataUser"

const { proxy } = getCurrentInstance();
const route = useRoute();

const total = ref(0);
const dialogVisibleDetail = ref(false);
const personId = ref("");
const deviceTitle = ref("");
const data = reactive({
  queryParams: {
    userName: "",
    sex: "",
    phoneNumber: "",
    email: "",
    credentialsType: "",
    credentialsNumber: "",
    birthday: "",
    nationality: "",
    address: "",
    createTime: "",
    loginDate: "",
    credentialsTime: ""
  },
  queryRules: {
    userName: [{required: true, message: "暂无"}],
    sex: [{required: true, message: "暂无"}],
    phoneNumber: [{required: true, message: "暂无"}],
    email: [{required: true, message: "暂无"}],
    credentialsType: [{required: true, message: "暂无"}],
    credentialsNumber: [{required: true, message: "暂无"}],
    birthday: [{required: true, message: "暂无"}],
    nationality: [{required: true, message: "暂无"}],
    address: [{required: true, message: "暂无"}],
    createTime: [{required: true, message: "暂无"}],
    credentialsTime: [{required: true, message: "暂无"}]
  },
  tableParams: {
    pageNum: 1,
    pageSize: 10
  },
  deviceData: {}
})
const { queryParams, tableParams, deviceData, queryRules } = toRefs(data);
const tableData = ref([]);

function indexMethod(index) {
  // 当前页码
  const currentPage = tableParams.value.pageNum
  // 每页显示的数据条数
  const pageSize = tableParams.value.pageSize
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize
  // 当前行的实际索引
  const truelndex = index + prevLastIndex
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize ? truelndex : index + prevLastIndex + 1
}

function goBack() {
  proxy.$router.go(-1);
}

function handleDetail(val) {
  console.log("AA", val.deviceType)
  deviceTitle.value = val.deviceType;
  dialogVisibleDetail.value = true;
  getDeviceInfo(val.deviceId).then(res => {
    if (res.code === 200) {
      deviceData.value = res.data;
    }
  })
}

// 获取用户信息
function getPerson() {
  console.log(personId.value)
  getPersonDetail(personId.value).then(res => {
    if (res.code === 200) {
      queryParams.value = res.data;
      queryParams.value.address = res.data.residentialZone + res.data.residentialAddress;
      queryParams.value.credentialsTime = res.data.credentialsStartTime + '～' + res.data.credentialsEndTime;
    }
  })
}

// 获取设备信息列表
function getDevice() {
  getDeviceListDetail(tableParams.value, personId.value).then(res => {
    if (res.code === 200) {
      tableData.value = res.rows;
      total.value = res.total;
    }
  })
}


// 获取用户ID
onBeforeMount(() => {
  personId.value = route.query.personId;
})

onMounted(() => {
  getPerson();
  getDevice();
})


</script>
<style lang="scss" scoped>
.container{
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  padding-bottom: 70px;

  .up-container{
    margin: 0 20px 20px;
    padding: 32px 30px 25px;
    background-color: #ffffff;
    border-radius: 4px;

    .litte-title{
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;

      img{
        margin-right: 10px;
      }
    }
    .address{
      width: 703px;
    }

    .license{
      width: 256px;
      height: 138px;
      border: 1px solid rgba(220, 223, 230, 1);
      background: rgba(245, 245, 245, 1);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: rgba(166, 166, 166, 1);
    }
  }
  .down-container{
    margin: 0 20px;
    background-color: #FFFFFF;
    border-radius: 4px;
    min-height: 52%;
    padding-bottom: 2%;
    .litte-title2{
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      top: 32px;
      left: 30px;

      img{
        margin-right: 10px;
      }
    }
  }

  .bottom-container{
    position: absolute;
    top: -2.7%;
    right: 0.3%;
    margin: 17px 20px 0;
    border-radius: 4px;
    height: 7%;
    display: flex;
    justify-content: center;
    align-items: center;

    :deep .el-button{
      width: 81px;
      height: 32px;
    }
  }
}

.el-form{
  margin-top: 30px;
}

//:deep .el-form-item--default .el-form-item__label{
//  width: 35%;
//  text-align: right;
//  color: #666666;
//  font-size: 14px;
//  font-weight: 400;
//}

:deep .el-form--inline .el-form-item{
  width: 320px;
  margin-right: 4%;
}

:deep .el-table{
  margin-top: 4%;
}

.deviceVisible{
  width: 559px;
  height: 484px;
  position: relative;
  top: 20%;

  .title{
    height: 100%;
    background-color: #2BC17B;
    color: #FFFFFF;
    text-align: left;
    padding: 15px 28px;
    font-size: 18px;
    letter-spacing: 1px;
  }
}

:deep .el-dialog__headerbtn{
  position: absolute;
  top: 3px;
  right: 0;
  padding: 0;
  width: 54px;
  height: 54px;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 31px;
  color: #ffffff;
}

:deep .el-dialog__body{
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
}

:deep .el-dialog:not(.is-fullscreen){
  margin-top: 7vh !important;
}

:deep .el-dialog__header{
  padding: 0;
  margin: 0;
  height: 12%;
}

:deep .el-textarea__inner{
  height: 100%;
  resize:none;
}

:deep .el-dialog__body{
  padding: 0px 22px 5px !important;
}

:deep .el-form{
  width: 100%;
}

:deep .el-select{
  width: 100%;
}

:deep .el-form-item--default .el-form-item__label{
  width: 100px;
  color: #666666;
  font-weight: 400;
  font-size: 14px;
  text-align: right;
  line-height: 1.3;
  margin: 5px 0 -2px 0;
}

:deep .el-dialog__headerbtn .el-dialog__close{
  color: #ffffff;
}

</style>